<template>
  <div id="Position" class="h100">
    <iLayout left>
      <section slot="title" class="flex_start">
        工程详情
      </section>
      <section slot="operation">
        <div class="flex_start">
          <div class="topBtnBox">
            <el-button type="primary" @click="addPositionClick(0)" v-if="$store.state.project_id">新建标段</el-button>
            <el-button type="success" @click="addPositionClick(lookPositionData.type)" v-if="lookPositionData&&lookPositionData.type!=null">新建{{$store.state.positionType[lookPositionData.type]}}</el-button>
          </div>
        </div>
      </section>
      <section slot="left">
        <iProTree ref="proTree" :nodeClick="nodeClickFun"></iProTree>
      </section>
      <section slot="right">
        <div v-if="catchType==2">
          <el-table :data="sectionData" border style="width: 100%">
            <el-table-column prop="name" label="断面名称">
            </el-table-column>
            <el-table-column prop="embeddingLocation" label="埋设位置">
            </el-table-column>
            <el-table-column prop="constructionState" label="施工情况">
            </el-table-column>
            <!-- <el-table-column prop="embeddingTime" label="埋设时间">
            </el-table-column> -->
            <el-table-column prop="groupName" label="负责小组">
            </el-table-column>
            <el-table-column fixed="right" label="断面操作" width="300px">
              <template slot-scope="scope">
                <el-button size="mini" @click="setSectionClick(scope.row)">修改断面</el-button>
                <el-button size="mini" @click="delSectionClick(scope.row)">删除断面</el-button>
                <el-button size="mini" @click="goUnit(scope.row)">断面单元→</el-button>
              </template>
            </el-table-column>
          </el-table>
          <br>
          <div class="flex_end">
            <el-button type="primary" @click="setPositionClick(addNodeCatchData,addNodeCatchNode)">修改{{$store.state.positionType[lookPositionData.type-1]}}</el-button>
            <el-button type="danger" @click="delPositionClick(addNodeCatchData,addNodeCatchNode)">删除{{$store.state.positionType[lookPositionData.type-1]}}</el-button>
          </div>
        </div>
        <div v-if="catchType==1">
          <div v-if="lookPositionData">
            <PositionForm ref="lookPositionRef" :_readonly="true" :type="set_catch_data?set_catch_data.type-1:'0'" :fromData="lookPositionData"></PositionForm>
            <div class="flex_end">
              <el-button type="primary" @click="setPositionClick(addNodeCatchData,addNodeCatchNode)">修改{{$store.state.positionType[lookPositionData.type-1]}}</el-button>
              <el-button type="danger" @click="delPositionClick(addNodeCatchData,addNodeCatchNode)">删除{{$store.state.positionType[lookPositionData.type-1]}}</el-button>
            </div>
          </div>
          <el-empty v-else description="←选择部位"></el-empty>
        </div>
      </section>
    </iLayout>
    <!-- 对话框们 -->
    <section>
      <!-- 新建部位对话框 -->
      <el-dialog :title="`新建${$store.state.positionType[catch_type]}`" :visible.sync="dialog.addPosition" width="30%">
        <div>
          <PositionForm ref="addPositionRef" :type="catch_type" :fromData="addPositionData"></PositionForm>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialog.addPosition = false">取 消</el-button>
          <el-button type="primary" @click="addPositionFun">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 修改部位对话框 -->
      <el-dialog :title="`修改${setPositionData?$store.state.positionType[setPositionData.type-1]:''}`" :visible.sync="dialog.setPosition" width="30%">
        <div>
          <PositionForm ref="setPositionRef" :type="set_catch_data?set_catch_data.type-1:'0'" :fromData="setPositionData"></PositionForm>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialog.setPosition = false">取 消</el-button>
          <el-button type="primary" @click="setPositionFun">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 删除部位对话框 -->
      <el-dialog :title="`删除`" :visible.sync="dialog.delPosition" width="30%">
        <div>
          确认删除?
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialog.delPosition = false">取 消</el-button>
          <el-button type="primary" @click="delPositionFun">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 新建断面 -->
      <el-dialog title="新建断面" :visible.sync="dialog.addSection" width="30%">
        <div style="max-height:50vh;overflow-y:auto;padding-right: 10px">
          <SectionForm ref="addSectionRef" :fromData="addSectionData"></SectionForm>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialog.addSection = false">取 消</el-button>
          <el-button type="primary" @click="addSectionFun">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 修改断面 -->
      <el-dialog title="修改断面" :visible.sync="dialog.setSection" width="30%" destroy-on-close>
        <div style="max-height:50vh;overflow-y:auto;padding-right: 10px">
          <SectionForm set ref="setSectionRef" :fromData="setSectionData"></SectionForm>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialog.setSection = false">取 消</el-button>
          <el-button type="primary" @click="setSectionFun">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 删除断面 -->
      <el-dialog title="删除断面" :visible.sync="dialog.delSection" width="30%">
        <div>
          删除断面吗？
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialog.delSection = false">取 消</el-button>
          <el-button type="primary" @click="delSectionFun">确 定</el-button>
        </span>
      </el-dialog>
    </section>
  </div>
</template>

<script>
import * as api from '../../api/private/position'
import * as api2 from '../../api/private/section'
import PositionForm from './formComponent/position_form.vue'
import SectionForm from './formComponent/section_form.vue'
export default {
  name: 'Position',
  data() {
    return {
      set_catch_data: '',
      catch_type: '',
      catchType: '0',
      dialog: {
        addPosition: false,
        setPosition: false,
        delPosition: false,
        addSection: false,
        setSection: false,
        delSection: false
      },
      // 选中的id
      selectID: '',
      // 新建数据
      addPositionData: {
        name: '',
        mileageIdentification: '',
        startMileage: '',
        endMileage: '',
        constructionOrg: '',
        remark: '',
        projectId: '',
        positionPid: ''
      },
      // 修改数据
      setPositionData: {
        name: '',
        mileageIdentification: '',
        startMileage: '',
        endMileage: '',
        constructionOrg: '',
        remark: ''
      },
      // 新建断面
      addSectionData: {
        name: '',
        sectionInterval: '0',
        startMileage: '',
        endMileage: '',
        tunnelId: '',
        constructionState: '',
        embeddingLocation: '',
        embeddingTime: '',
        groupId: '',
        num: '1',
        prefix: '',
        standard: '',
        surroundings: '',
        remark: ''
      },
      // 修改断面
      setSectionData: {
        name: '',
        sectionInterval: '',
        startMileage: '',
        endMileage: '',
        tunnelId: '',
        constructionState: '',
        embeddingLocation: '',
        embeddingTime: '',
        groupId: '',
        num: '',
        prefix: '',
        standard: '',
        surroundings: '',
        remark: ''
      },
      // 断面表格
      sectionData: [],
      // 只看数据
      lookPositionData: null
    }
  },
  components: {
    PositionForm,
    SectionForm
  },
  mounted() {
    // this.catchType = 2
    // 初始化断面
    this.$ebs.$on('project_change', this.nullSectionData)
    let defaultTunnel = this.$refs.proTree.defaultTunnel
    if (defaultTunnel) {
      this.nodeClickFun(defaultTunnel)
    } else {
      this.nullSectionData()
    }
  },
  methods: {
    nullSectionData() {
      this.sectionData = []
    },
    // 树节点单击事件
    async nodeClickFun(row, node) {
      // console.log(row, 'row')
      this.addNodeCatchData = row
      this.addNodeCatchNode = node ? node : null
      this.selectID = row.id
      let type = row.type
      this.catchType = row.type
      if (type < 2) {
        this.lookPositionData = row
        // console.log(row)
      } else {
        if (type == 2) {
          // 获取隧洞下所有的断面
          this.lookPositionData = row
          this.getAllSection()
        }
      }
    },
    // 获取部位详情
    async getPosiiotnDeta(row) {
      let req = { id: row.id }
      let res = await api.getPositionData(req)
      if (res.code == 0) {
        this.lookPositionData = res.data
      } else {
        this.$msg.error(res.msg)
      }
    },

    // 获取隧洞下所有的断面
    async getAllSection() {
      let req = { tunnelId: this.selectID }
      let res = await api2.getAllSection(req)
      if (res.code == 0) {
        this.sectionData = res.data
      } else {
        this.$msg.error(res.msg)
      }
    },
    // 新建部位点击
    addPositionClick(type) {
      this.catch_type = type - 0
      console.log(type)
      if (this.catch_type == 0) {
        // this.addNodeCatchDataRoot = this.$refs.proTree.treeData
      } else {
        this.addPositionData.mileageIdentification = this.addNodeCatchData.mileageIdentification
        this.addSectionData.prefix = this.addNodeCatchData.mileageIdentification
      }
      if (this.catch_type < 2) {
        this.dialog.addPosition = true
      } else {
        if (this.catch_type == 2) {
          this.dialog.addSection = true
        }
      }
    },
    // 新建部位函数
    async addPositionFun() {
      let bool = this.$refs.addPositionRef.validate()
      if (bool) {
        let req = this.addPositionData
        req.projectId = this.$store.state.project_id
        req.positionPid = this.catch_type == 0 ? '' : this.selectID
        let res = await api.addPosition(req)
        if (res.code == 0) {
          this.dialog.addPosition = false
          this.$refs.proTree.addNode(this.addNodeCatchData, res.data, this.catch_type == 0)
          this.$refs.addPositionRef.resetFields()
        } else {
          this.$msg.error('新建失败')
        }
      }
    },
    // 树节点修改按钮点击
    setPositionClick(data, node) {
      this._catchId = data.id
      this.set_catch_data = JSON.parse(JSON.stringify(data))
      this._catchNode = node
      this.setPositionData = this.set_catch_data
      this.dialog.setPosition = true
    },
    // 修改部位事件
    async setPositionFun() {
      let bool = this.$refs.setPositionRef.validate()
      if (bool) {
        let req = this.setPositionData
        let res = await api.setPosition(req)
        if (res.code == 0) {
          this.$refs.proTree.init()
          this.lookPositionData = this.set_catch_data
          this.addNodeCatchData = this.set_catch_data
          this.dialog.setPosition = false
        } else {
          this.$msg.error('修改失败')
        }
      }
    },
    // 树节点删除按钮点击
    delPositionClick(data, node) {
      this._catchId = data.id
      this.set_catch_data = data
      this._catchNode = node
      this.dialog.delPosition = true
    },
    // 删除部位事件
    async delPositionFun() {
      let req = [this._catchId]
      let res = await api.delPosition(req)
      if (res.code == 0) {
        // 手动删除节点
        let data = this.set_catch_data
        let node = this._catchNode
        this.$refs.proTree.delNode(data, node)
        // let locNode = JSON.parse(window.sessionStorage.getItem('defaultTunnel'))
        // if (data.id == locNode.id) {
        //   window.sessionStorage.removeItem('defaultTunnel')
        // }
        window.sessionStorage.removeItem('defaultTunnel')
        this.nullSectionData()
        // 关闭对话框
        this.dialog.delPosition = false
      } else {
        this.$msg.error('删除失败')
      }
    },
    // 新建断面
    async addSectionFun() {
      let bool = this.$refs.addSectionRef.validate()
      if (bool) {
        let req = this.addSectionData
        req.tunnelId = this.selectID
        let res = await api2.addSection(req)
        if (res.code == 0) {
          this.dialog.addSection = false
          this.getAllSection()
          this.$refs.addSectionRef.resetFields()
        } else {
          this.$msg.error(res.msg)
        }
      }
    },
    // 修改断面点击
    setSectionClick(data) {
      this.setSectionData = data
      this.dialog.setSection = true
    },
    // 修改断面函数
    async setSectionFun() {
      let bool = this.$refs.setSectionRef.validate()
      if (bool) {
        let req = this.setSectionData
        let res = await api2.setSection(req)
        if (res.code == 0) {
          this.getAllSection()
          this.dialog.setSection = false
        } else {
          this.$msg.error(res.msg)
        }
      }
    },
    // 删除断面按下
    delSectionClick(data) {
      this.catchSectionData = data
      this.dialog.delSection = true
    },
    // 删除断面函数
    async delSectionFun() {
      let req = [this.catchSectionData.id]
      let res = await api2.delSection(req)
      if (res.code == 0) {
        this.getAllSection()
        this.dialog.delSection = false
      } else {
        this.$msg.error(res.msg)
      }
    },
    // 跳转单元
    goUnit(row) {
      this.$router.push({ path: '/Unit', query: row })
    }
  },
  destroyed() {
    this.$ebs.$off('project_change', this.nullSectionData)
  }
}
</script>

<style lang="scss" scoped>
.topBtnBox {
  padding-left: 20px;
}
</style>
 